<template>
	<view class="warp padding-top padding-lr-10 padding-bottom-10 text-df bg-f8 h100">
    
    <template v-if="msg_type == 2">
      <!-- 消息内容循环 start -->
      <view class="list padding-bottom-24" @longtap="delMessage(item, index)" v-for="(item, index) in listData" :key="index">
      	<!-- 平台消息 -->
      	<view class="order-item flex flex-direction padding-left bg-white margin-lr-24 radius-16 overHidden"
      		@click="goDetail(item)">
      		<view
      			class="i-top flex align-center justify-between padding-tb text-df padding-right text-333 relative">
      			<text class=" flex1  text-blod">
      				{{ item.title }}
      			</text>
      			<text class="text-sm text-999 ">{{ item.create_time }}</text>
      		</view>
      		<view class="flex">
      			<view class="bg-f8 flex-shrink fu-block-150 overHidden">
      				<fu-image :src="item.thumb" mode="aspectFill"></fu-image>
      			</view>
      			<view class=" bg-fa margin-right height-150 padding-16 line-height-40 text-df text-999 padding-top-10  fu-fs28 padding-xs">
      				<scroll-view scroll-y="true" style="height: 130rpx;">
      					<view class="overflowfo">{{ item.content }}</view>
      				</scroll-view>
      			</view>
      		</view>
      		<view class=" flex align-center padding-tb-24 text-df padding-right text-333 relative">
      			<text class="text-999 text-sm"> {{ item.from }}</text>
      		</view>
      	</view>
      </view>
    </template>
    <template v-else>
      <view class="list" @longtap="delMessage(item, index)" v-for="(item, index) in listData" :key="index">
      <!-- 	<view class="text-center margin-top">
      		<text class="text-999 text-sm">{{ item.create_time || item.add_time }}</text>
      	</view> -->
        <!-- 平台消息 -->
		 <!-- @click.stop="lookInfo(item)" -->
      	<view class="consult">
      	  <view class="image" v-if="item.thumb">
      	    <fu-image :src="item.thumb"></fu-image>
      	  </view>
      	  <view class="desc">
      	    <view class="text-bold text-lg text-333">{{ item.title || "暂无标题" }}</view>
      	   <view class=" text-cut-2 text-df text-666 margin-top-sm">
      	     {{item.content || '无具体内容'}}
      	   </view>
      	   <view class=" margin-top-sm">
      	      <text class="text-999 text-sm">{{ item.create_time || item.add_time }}</text>
      	    </view>
      	  </view>
      	</view>
      </view>
    </template>
		<!-- 消息内容循环 end -->
		<!-- 分页组件 start-->
		<fu-empty :paging-list-loaded-all="pagingListLoadedAll" :paging-list-no-list-data="pagingListNoListData"
			:list-data-length="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
		<!-- 分页组件 end-->
		<!-- 网络监测 start -->
		<fu-notwork></fu-notwork>
		<!-- 网络监测  end-->
	</view>
</template>
<script>
	import pagingList from "@/common/mixin/paging_list.js"; //混合开发 请求数据
	export default {
		mixins: [pagingList],
		data() {
			return {
				titleName: global.i18n["消息通知"],
				minixPagingListsApi: global.apiUrls.getOperationGetSystemMsgList, //列表请求地址
				allowOnloadGetList: false, //是否允许请求
				pageingListApiMethod: "post", //请求方式
				msg_type: 3, //消息类型
			};
		},
		/**
		 * @description 页面初始化
		 * @param {Object} e  msg_type:消息类型id,  name:消息类型名称
		 *
		 */
		onLoad(e) {
			this.setSysTitle(e); //设置系统导航名称
			this.msg_type = e.id || 3;
			this.allowOnloadGetList = true;
			this.pagingListGetLists(); //获取数据 调用混用开发里面的方法
			// this.setNavigationBarTitle(this.i18n['订单消息']);
		},
		onPullDownRefresh() {
			this.pagingListToggle();
		},
		methods: {
			/**
			 *@description 查看详情
			 */
			lookInfo(item) {
				uni.navigateTo({
					url: '/pages/service-message/message/message-detail/index?id=' + item.id
				})
			},
			/**
			 * @description 删除消息
			 * @param {Object} item - id:消息id唯一标识
			 */
			delMessage(item, index) {
				this.$util.showModal({
					title: this.i18n["提示"],
					content: this.i18n["确定删除此消息？"],
					success: (data) => {
						if (data.confirm) {
							this.$api
								.post(global.apiUrls.postOperationDelSystemMsg, {
									id: item.id,
								})
								.then((res) => {
									if (res.data.code == 1) {
                    this.listData.splice(index, 1);
									} else {
										this.$message.info(res.msg);
									}
								});
						} else if (data.cancel) {
							// console.log('用户点击取消');
						}
					},
				});
			},
			/**
			 * 设置系统导航名称
			 * @param {Object} e name: 消息类型
			 */
			setSysTitle(e) {
				this.titleName = e.name;
				uni.setNavigationBarTitle({
					title: e.name || this.i18n["消息通知"],
				});
			},
			/**
			 * 点击当前通知
			 * @param {Object} item id
			 */
			goDetail(item) {
        
			},
			/**
			 * 请求分页接口时加入额外参数
			 */
			pagingListPostData() {
				return {
					msgtype: this.msg_type,
					page_size: 10,
				};
			},
		},
	};
</script>

<style lang="scss" scoped>
		.bg-fa {
			background: #fafafa;
		}
		.overflowfo{
			display: -webkit-box;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
		}
  .list {
  	.times {
  		text-align: center;
  		margin-top: 32rpx;
  		.text {
  			width: 216rpx;
  			height: 33rpx;
  			font-size: 24rpx;
  			line-height: 29rpx;
  			color: #999999;
  			opacity: 1;
  		}
  	}
  	.consult {
  		margin: 25upx 0;
  		width: 100%;
  		border-radius: 16rpx;
  		background: #fff;
  		display: flex;
  		flex-direction: column;
  		justify-content: space-around;
  		color: #999;
  
  		.image {
  			height: 320rpx;
  			width: 100%;
  			border-radius: 16rpx 16rpx 0 0;
  			padding-bottom: 20rpx;
        overflow: hidden;
  		}
  
  		.desc {
  			padding: 24rpx;
  
  			.title {
  				/* height: 45rpx; */
  				font-size: 32rpx;
  				font-family: PingFang SC;
  				font-weight: 500;
  				line-height: 36rpx;
  				color: #333333;
  			}
  
  			.content {
  				// height: 40rpx;
  				font-size: 28rpx;
  				font-family: PingFang SC;
  				font-weight: 400;
  				line-height: 44rpx;
  				color: #666666;
  				opacity: 1;
  				overflow: hidden;
  				text-overflow: ellipsis;
  				display: -webkit-box;
  				-webkit-line-clamp: 2;
  				-webkit-box-orient: vertical;
  			}
  		}
  
  	}
  }
</style>
